<script setup>
	import FirstTitle from "@comp/FirstTitle";
	import {
		Editor,
		Toolbar
	} from "@wangeditor/editor-for-vue";
	import {
		onMounted
	} from "vue";
	
	import { postTableData } from "@/api/table";
	
	import { searchDataQbxx } from "@/api/search";
	import { addOrUpdateQbxx } from "@/api/addOrUpdate";

	const city = window.globalObj.name;
	
	const editorRef = shallowRef();
	
	const toolbarConfig = {};
	const editorConfig = {
	  placeholder: "请输入内容...",
	};
	const mode = ref("default");
	
	// 加载html
	const initHtml = () => {
	  searchDataQbxx({ m: "能力现状-电磁环境情况" }).then((res) => {
	    const { data } = res;
	    valueHtml.value = data.find((x) => x.k === "电磁环境情况")?.v || "";
	  });
	};
	
	const handleCreated = (editor) => {
	  editorRef.value = editor; // 记录 editor 实例，重要！
	};
	
	const valueHtml = ref(
	  "辖区内民用广播电视大功率发射塔XX座，各类卫星、短波、超短波通信台站XX个，各类电信运营商通信发射机站数量XX个，电磁环境较复杂，军用电磁侦通器材品种多、用频广，相互之间也存在不同程度的干扰。战时，在敌广谱、强电磁干扰下，人防短波电台和超短波电台将在较复杂电磁环境下工作，需要充分发挥社会电磁资源优势，保证指挥通信畅通具体情况如下:"
	);
	
	
	const saveProgramme = () => {
		ElMessageBox.confirm(`确定要保存吗?`, "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		  customClass: "message-box",
		}).then(() => {
		  addOrUpdateQbxx({
		    m: "能力现状-电磁环境情况",
		    data: [
		      {
		        k: "电磁环境情况",
		        v: valueHtml.value,
		      },
		    ],
		  })
		    .then((result) => {
		      if (result.code === 200) {
		        ElMessage.success("操作成功");
		        initHtml();
		      } else {
		        ElMessage.error(result.msg);
		      }
		    })
		    .catch(() => {});
		});
		
	}
	onMounted(() => {
		
		initHtml();

	});
	onBeforeUnmount(() => {
		
	});
	
	// 表头单元格样式
	const headerCellStyle = () => {
		return {
			backgroundColor: "#f5f7fa",
			color: "rgba(0,0,0,0.85)",
			fontSize: "14px",
			height: "54px",
		};
	};
	// 单元格样式
	const cellStyle = () => {
		return {
			color: "rgba(0,0,0,0.65)",
			fontSize: "14px",
			lineHeight: "22px",
		};
	};
	const tableData = ref([])
	const getList = () => {
		postTableData({
			docType: "intelligence",
			method: "zhuyaodiancihuanjing",
		}).then(result=>{
			if(result.code === 200){
				tableData.value = result.data
			}
		})
	}
	getList()
	
</script>
<template>
	<div class="">
		<FirstTitle name="电磁环境情况" />
		<div style="border: 1px solid #ccc" class="top-15">
		  <Toolbar
		    style="border-bottom: 1px solid #ccc"
		    :editor="editorRef"
		    :defaultConfig="toolbarConfig"
		    :mode="mode"
		  />
		  <Editor
		    style="height: 500px; overflow-y: hidden"
		    v-model="valueHtml"
		    :defaultConfig="editorConfig"
		    :mode="mode"
		    @onCreated="handleCreated"
		  />
		</div>
		
		
		
		<FirstTitle name="主要电磁环境参数" class="top-15" />
		<div class="text-center top-15">{{city}}主要电磁环境参数</div>
		<el-table
		  id="table"
		  :data="tableData"
		  class="top-15"
		  style="width: 100%"
		  :header-cell-style="headerCellStyle"
		  :cell-style="cellStyle"
		  border
		>
		  <el-table-column prop="rowNum" label="序号" width="60" align="center" />
		  <el-table-column prop="area" label="行政区域" />
		  <el-table-column prop="pinpufanwei" label="平时频谱范围分布（MHz）" />
		  <el-table-column prop="gudingdianhua" label="固定电话用户（万人）" />
		  <el-table-column prop="pujilv" label="固定电话普及率（部/百人）" />
		  <el-table-column prop="yidongdianhua" label="移动电话用户总数（万人）" />
		  <el-table-column prop="pujilv2" label="移动电话普及率（部/百人）" />
		  <el-table-column prop="ltruhu" label="固定互联网宽带接入用户数（万人）" />
		  <el-table-column prop="ydruhu" label="移动互联网用户数（万人）" />
		  <el-table-column prop="fasheta" label="民用广播电视发射塔数量（座）" />
		  <el-table-column prop="diantai" label="大功率无线电台数量（部）" />
		  <el-table-column prop="jizhan" label="手机基站数量（个）" />
		  <el-table-column prop="pinduan" label="手机用频频段（MHz）" />
		</el-table>
		

		<div class="flex-justify-end top-20">
			<el-button type="primary" class="save-btn" @click="saveProgramme">保存</el-button>
		</div>
	</div>
</template>
<style scoped lang="scss"></style>